<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <span>{{a}}</span> - <input type="text" v-model="a" /><br>
      <span>{{b}}</span> - <input type="radio" name="sex" v-model="b" value="男" />男<br>
      <input type="radio" name="sex" v-model="b" value="女" />女<br>
      <span>{{c}}</span> - <input type="checkbox" v-model="c"/><br>
      <span>{{d}}</span> - <select name="" v-model="d">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
        <option value="d">d</option>
      </select><br>
      <span>{{e}}</span> -
      <input type="checkbox" v-model="e" name="like" value="蓝球"/>篮球
      <input type="checkbox" v-model="e" name="like" value="足球"/>足球
      <input type="checkbox" v-model="e" name="like" value="排球"/>排球
      <input type="checkbox" v-model="e" name="like" value="羽毛球"/>羽毛球
    </div>
	</body>
  <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    
    // 双向数据绑定:v-model
    // 用在表单元素身上,不同的表单控件,表示不同的含义
    // 表示当前表单控件的状态
    // 输入框->内容
    // 复选项->选中状态
    // 下拉菜单->当前选项
    // 文本域->内容
    // ...
    
    var vm = new Vue({
      el:"#app",
      data:{
        a:"",
        b:true,
        c:"",
        d:"",
        e:[]
      }
    })
    
  </script>
</html>
